import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";

/**
 *
 * @param {String} date  短横分割的日期字符串， 形如2015-09-04
 * @return {Object}
 */
function getDateInfo(date) {
  return {
    year: date.split("-")[0],
    month: date.split("-")[1],
    day: date.split("-")[2]
  };
}

export default class TimelineItem extends React.Component {
  static defaultProps = {
    prefixCls: "ant-timeline",
    color: "blue",
    last: false
  };

  render() {
    const {
      prefixCls,
      className,
      color = "",
      last,
      children,
      dot,
      replacement = "",
      date,
      icon,
      ...restProps
    } = this.props;

    const itemClassName = classNames(
      {
        [`${prefixCls}-item`]: true,
        [`${prefixCls}-item-last`]: last
      },
      className
    );

    const dotClassName = classNames({
      [`${prefixCls}-item-head`]: true,
      [`${prefixCls}-item-head-custom`]: dot,
      [`${prefixCls}-item-head-${color}`]: true
    });

    const dotText = (
      <div className="ant-timeline-dot-text">
        <div className="ant-timeline-year">
          {date && getDateInfo(date).year}
        </div>
        <div className="ant-timeline-date">
          {date && getDateInfo(date).month + "/"}
          {date && getDateInfo(date).day}
        </div>
      </div>
    );

    return (
      <div {...restProps} className={itemClassName}>
        <div className={`${prefixCls}-item-label`}>
          {replacement || dotText}
        </div>
        <div className={`${prefixCls}-item-tail`} />
        {icon ? icon : <div className={dotClassName}>{dot}</div>}
        <div className={`${prefixCls}-item-content`}>{children}</div>
      </div>
    );
  }
}
TimelineItem.propTypes = {
  prefixCls: PropTypes.string,
  className: PropTypes.string,
  color: PropTypes.string,
  dot: PropTypes.any,
  date: PropTypes.string,
  last: PropTypes.any,
  children: PropTypes.any,
  icon: PropTypes.any,
  replacement: PropTypes.any
};
